<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2024/4/18
  Time: 23:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>门诊信息</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div class="main-wrapper">
    <div class="sidebar-wrapper">
        <%@include file="components/sidebar.html" %>
    </div>
    <div class="main-container">
        <%@include file="components/navbar.html" %>
        <div class="app-container" id="main-app">
            <div class="appoint-mana-container" v-if="tab == 0">

                <div class="sub-route-title-box">
                    <span class="divi-line"></span>
                    <span class="title">门诊信息</span>
                </div>

                <div class="table-container">
                    <el-table
                            :data="tableData"
                            style="width: 95%"
                            :header-cell-style="{
                    'background-color': '#f8f8f9',
                    'color': '#000',
                    'font-weight': '600',
                    'text-align': 'center'
                }"
                            :cell-style="{ 'text-align': 'center' }"
                    >
                        <el-table-column
                                type="index"
                                label="#"
                                width="50">
                        </el-table-column>
                        <el-table-column label="门诊号" width="120">
                            <template slot-scope="scope">
                                <span>{{ getNo(scope.row.id) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="患者姓名">
                        </el-table-column>
                        <el-table-column label="状态">
                            <template slot-scope="scope">
                                <span>{{ getStatus(scope.row.status) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="日期">
                            <template slot-scope="scope">
                                <span>{{ getTime(scope.row.datetime) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" plain @click="appoinDetailClick(scope.row)">查 看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="pagination-box">
                        <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="total">
                        </el-pagination>
                    </div>

                </div>

            </div>

            <el-dialog title="预约详情" :visible.sync="detailDialogFlag">
                <div class="dialog-body">
                    <div class="message-container">
                        <div class="message-item">
                            <span class="msg-title">挂号编号</span>
                            <span class="msg-content">{{getNo(appoinDetail.id)}}</span>
                        </div>
                        <div class="message-item">
                            <span class="msg-title">患者姓名</span>
                            <span class="msg-content">{{appoinDetail.name}}</span>
                        </div>
                        <div class="message-item">
                            <span class="msg-title">挂号时间</span>
                            <span class="msg-content">{{getTime(appoinDetail.datetime)}}</span>
                        </div>
                        <div class="message-item">
                            <span class="msg-title">挂号进度</span>
                            <span class="msg-content">{{getStatus(appoinDetail.status)}}</span>
                        </div>
                    </div>
                    <div style="height: 200px; margin-top: 1.5vw;">
                        <el-steps direction="vertical" :active="getStatusNum(appoinDetail.status)==1||getStatusNum(appoinDetail.status)==3?1:2" space="90px">
                            <el-step title="挂号已发起，排队等待中"></el-step>
                            <el-step title="医生正在问诊"></el-step>
                            <el-step title="问诊已结束"></el-step>
                        </el-steps>
                    </div>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="detailDialogFlag = false">关闭</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</div>
<!-- import Vue before Element -->
<script src="assets/js/vue.js"></script>
<!-- import JavaScript -->
<script src="assets/js/axios.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#main-app',
        data: function () {
            return {
                detailDialogFlag: false,
                commentDialogFlag: false,
                tab: 0,
                statusMap: {
                    'pending': '排队中',
                    'confirmed': '已完成',
                    'cancelled': '已取消'
                },
                statusNumMap: {
                    'pending': 1,
                    'confirmed': 2,
                    'cancelled': 3
                },
                formData: {
                    result: ''
                },
                rules: {
                    result: [],
                },
                typeOptions: [],
                clinicsOptions: [],
                doctorOptions: [],
                total: 1,
                tableData: [],
                appoinDetail: {
                    "datetime": 1714027955000,
                    "doctorsId": 1,
                    "id": 9,
                    "department": "肛肠科",
                    "title": "石大夫",
                    "status": "pending"
                },
                timeFormData: {
                    date: null
                },
                doctorId: -1

            }
        },
        methods: {
            routerWatcher() {
                setInterval(() => {
                    let query = window.location.search;
                    // console.log(query)
                    if (query != '') {
                        this.tab = Number(query.split('tab=')[1]);
                    }
                }, 100)
            },
            getTime(datetime) {
                let date = new Date(datetime);
                return (date.toLocaleDateString() + ' ' + date.toLocaleTimeString())
            },
            getStatus(str) {
                return this.statusMap[str]
            },
            getStatusNum(str) {
                return this.statusNumMap[str]
            },
            getNo(id) {
                let formattedId = id.toString().padStart(8, '0');
                return formattedId;
            },
            getAppointments() {
                let params = {
                    doctorsId: this.doctorId
                }
                if(JSON.parse(localStorage.getItem('user')).role == "admin") {
                    axios.get('AdminMessageServlet')
                        .then(response => {
                            console.log(response);
                            if(response.data.status==200) {
                                this.tableData = response.data.data
                                // window.location = "login.html"
                            }
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }
                else {
                    axios.get('DoctorsAppointmentsServlet', {params})
                        .then(response => {
                            console.log(response);
                            if (response.data.status == 200) {
                                this.tableData = response.data.data
                                // window.location = "login.html"
                            }
                        })
                        .catch(error => {
                            console.log(error);
                        });
                }
            },
            getAppointmentsFinished() {

                axios.put('DoctorsAppointmentsServlet?doctorsId='+this.doctorId)
                    .then(response => {
                        console.log(response);
                        if(response.data.status==200) {
                            this.tableData = response.data.data
                            // window.location = "login.html"
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            appoinDetailClick(item) {
                this.detailDialogFlag = true;
                this.appoinDetail = item
            },
            appoinFormInit() {
                let u = JSON.parse(localStorage.getItem('user'))
                this.formData.name = u.name;
                this.formData.mobile = u.phoneNumber;
                axios.get('ClinicsServlet')
                    .then(response => {
                        console.log(response);
                        if(response.data.status==200) {
                            let typeObj = []
                            for(let item of response.data.data) {
                                let tmp = {
                                    label: item,
                                    value: item
                                }
                                typeObj.push(tmp);
                            }
                            this.typeOptions = typeObj;
                            // window.location = "login.html"
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            getDoctorId(uid) {
                axios.post('DoctorsServlet')
                    .then(response => {
                        console.log(response);
                        if(response.data.status==200) {
                            for(let item of response.data.data) {
                                console.log(item,item.userId == uid)
                                if(item.userId == uid) {
                                    this.doctorId = item.id
                                    console.log(this.doctorId)
                                    break;
                                }
                            }
                            this.getAppointments();
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            timeValidateFunc() {
                return [
                    {
                        validator: (rule, value, callback) => {
                            const start = new Date(this.formData.date).getTime();
                            if (!value) {
                                callback(new Error('请选择时间'));
                            } else if (start < Date.now()) {
                                callback(new Error('发布时间要大于当前时间!'));
                            } else {
                                callback();
                            }
                        },
                    },
                ];
            },
            timeValid(time) {
                let now = Date.now()
                let seletced = new Date(time)
                if(now >= seletced) {
                    ELEMENT.Message.error('预约时间不得早于当前时间');
                    this.formData.date = null
                    this.timeFormData.date = null
                }
            },
            cancelApplication() {
                console.log(this.appoinDetail)
                let params = {
                    id: this.appoinDetail.id
                }
                console.log(params,this.appoinDetail.id)
                axios.delete('AppointmentsServlet', {params})
                    .then(response => {
                        console.log(response);
                        if(response.data.status==200) {
                            this.commentDialogFlag = false
                            this.getAppointments();
                            ELEMENT.Message({
                                message: '成功取消预约',
                                type: 'success'
                            });

                            // window.location = "login.html"
                        }
                        else {
                            ELEMENT.Message.error('取消失败');
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        ELEMENT.Message.error('未知错误，请联系管理员');
                    });
            },
            confirmApplication() {
                let data = {
                    id: this.appoinDetail.id
                }
                axios.post('DoctorsAppointmentsServlet', data)
                    .then(response => {
                        console.log(response);
                        if(response.data.status==200) {
                            this.commentDialogFlag = false
                            this.getAppointments();
                            ELEMENT.Message({
                                message: '提交成功',
                                type: 'success'
                            });

                            // window.location = "login.html"
                        }
                        else {
                            ELEMENT.Message.error('提交失败');
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        ELEMENT.Message.error('未知错误，请联系管理员');
                    });
            },
            appoinModifyClick(item) {
                this.commentDialogFlag = true;
                this.formData.result = ''
                this.appoinDetail = item
                console.log(this.appoinDetail)
            },

        },
        created() {
            this.routerWatcher();
            this.appoinFormInit();
            this.getDoctorId(JSON.parse(localStorage.getItem('user')).id)
            // let id = JSON.parse(localStorage.getItem('user')).id
            // this.getAppointments(id);
        },
        watch:{
            tab(newValue, oldValue) {
                if(newValue == 1) {
                    console.log('tab changed')
                    let id = JSON.parse(localStorage.getItem('user')).id
                    this.getAppointmentsFinished();
                }
            }
        }
    })
</script>
<style>
    @import "assets/css/base.css";

    .main-wrapper {
        width: 100%;
        height: 100vh;
        display: flex;
    }

    .main-wrapper .sidebar-wrapper {
        width: 15vw;
        height: 100vh;
        position: fixed;
        left: 0;
    }

    .main-wrapper .main-container {
        margin-left: 15vw;
        width: 85vw;
        height: 100vh;
    }

    .main-wrapper .main-container .online-appoint-container {
        width: 100%;
        padding: 0.5vw 2vw 1vw;
        box-sizing: border-box;
    }

    .sub-route-title-box {
        display: flex;
        justify-content: start;
        padding: 1vw 0;
    }
    .sub-route-title-box .divi-line {
        display: inline-block;
        width: 2px;
        height: 1.2vw;
        background-color: #409EFF;
    }
    .sub-route-title-box .title {
        padding-left: 1vw;
        margin-left: -2px;
        color: #808080;
    }

    .main-wrapper .main-container .online-appoint-container  .card-container {
        /*width: 23%;*/
        display: flex;
        flex-direction: column;
        padding: 0.5vw 0 2vw;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px solid #e6ebf5;
        border-radius: 4px;
    }

    .card-container .card-title {
        padding: 0.5vw 1vw;
        border-bottom: 1px solid #e6ebf5;
    }
    .card-container .card-body {
        padding: 1.5vw 1.5vw 0.5vw;
    }
    .card-container .card-body .headimg-box {
        display: flex;
        height: 8vw;
        justify-content: center;
        padding: 0.5vw;

    }
    .card-container .card-body .headimg-box img {
        width: 100%;
        border-radius: 50%;
        overflow: hidden;
    }
    .card-container .card-body .info-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        font-size: 0.92vw;
        border-top: 1px solid #e7eaec;
        margin-top: 1.2vw;
    }
    .card-container .card-body .info-box .info-item {
        display: flex;
        justify-content: space-between;
        padding: 0.8vw 0;
        border-bottom: 1px solid #e7eaec;
    }


    .main-wrapper .main-container .appoint-mana-container {
        width: 100%;
        padding: 0.5vw 2vw 1vw;
        box-sizing: border-box;
    }
    .main-container .pagination-box {
        display: flex;
        justify-content: center;
        padding: 1vw;
    }
    .dialog-body {
        padding: 0.5vw 2.5vw;
        color: #808080;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .dialog-body .message-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .dialog-body .message-item {
        display: flex;
        justify-content: start;
        padding: 0 0 2vw;
    }
    .message-item .msg-title {
        margin-right: 2vw;
    }
</style>
</body>
</html>
